import React from 'react';
import { Row, Col } from 'antd';
import {
  FileTextOutlined,
  CalendarOutlined,
  CustomerServiceOutlined,
  TeamOutlined,
} from '@ant-design/icons';
import StatCard from '../common/StatCard';

const StatsSection = () => {
  const stats = [
    { title: '乐谱总数', value: 156, icon: <FileTextOutlined />, color: '#1890ff' },
    { title: '活动数量', value: 8, icon: <CalendarOutlined />, color: '#52c41a' },
    { title: '歌曲库', value: 89, icon: <CustomerServiceOutlined />, color: '#faad14' },
    { title: '乐队成员', value: 6, icon: <TeamOutlined />, color: '#722ed1' },
  ];

  return (
    <Row gutter={[16, 16]} style={{ marginTop: 24 }}>
      {stats.map((stat, index) => (
        <Col xs={24} sm={12} lg={6} key={index}>
          <StatCard {...stat} />
        </Col>
      ))}
    </Row>
  );
};

export default StatsSection; 